

import main from '../../main';
import { apiGeCardPackOrder } from '../../api';
import Fullscreen from '../../components/fullscreen';
import { Empty, Pagination, Popover, Select, Table, Tooltip } from '@arco-design/web-react';
import { useEffect, useState } from 'react';
import { dictDataOptions, dictTag, } from '../../utils/utils';
import { keepCopy, tagCopy } from '../../components/tableColumn';
import { getDict } from '../../utils/utils';
import dayjs from 'dayjs';
import LoadingMask from '../../components/loadingMask';
interface Props {
    iccid: string
}
// 系统开关 状态
const CARD_PACK_ORDER_STATUS = 'card_pack_order_status';
const PAY_CONFIG_PAY_TYPE = 'pay_config_pay_type';
const CARD_PACK_ORDER_DETAIL_STATUS = 'order_status';
export default function InProgress({ iccid }: Props) {
    const [dataSource, setdataSource] = useState<any[]>([])
    const [filterData, setFilterData] = useState<any[]>([])
    const [value, setvalue] = useState('1')
    const [total, settotal] = useState(0)
    const [pageNum, setpageNum] = useState(1)
    const [pageSize, setpageSize] = useState(1000)
    const [dictDatas, setDictDatas] = useState<Record<string, any>>({});
    useEffect(() => {
        async function fetchDictData() {
            const data = await getDict(CARD_PACK_ORDER_STATUS, PAY_CONFIG_PAY_TYPE, CARD_PACK_ORDER_DETAIL_STATUS);
            setDictDatas(data);
        }

        fetchDictData();
    }, []);
    useEffect(() => {
        getList(iccid, pageNum, pageSize)
    }, [iccid])
    async function getList(iccid: string, pageNum: string | number, pageSize: string | number) {
        LoadingMask.show('正在加载...');
        const res = await apiGeCardPackOrder(iccid, pageNum, pageSize)
        if (res?.data?.rows?.length > 0) {
            setdataSource([...res.data.rows])
            getFilterData(value, res.data.rows)
        }

        settotal(res?.data?.total)
        LoadingMask.hide();
    }

    function getFilterData(value: string, list?: any[]) {
        const data = list || [...dataSource]

        const filterData = data.filter((item) => item.orderStatus?.toString() === value) || [];
        setFilterData(filterData)
    }
    return (

        <div className='p-10 bw-100 bh-100 inProgress'>

            <div className="page-content bh-100 minh-200  d-flex-r ai-start flex-wrap" style={{
                rowGap: '10px',
                columnGap: '10px'
            }}>


                <div style={{ width: '100%' }}>
                    <Select
                        allowClear
                        value={value}
                        placeholder='请选择状态'
                        style={{ width: '200px', float: 'right' }}
                        options={dictDataOptions(dictDatas[CARD_PACK_ORDER_DETAIL_STATUS])}
                        onChange={(value) => {
                            setvalue(value)
                            if (!value) {
                                return setFilterData(dataSource)
                            }
                            getFilterData(value)
                        }}
                    />
                </div>



                {
                    filterData?.map(item => {
                        return <div className='bg-white p-10 item-width-2 border-radius-20'>
                            <div className='text-color-p font-size-14 line-height-30'>
                                {item.packDetailName}
                                <span style={{ float: 'right' }}>{dictTag(item.status, dictDatas[CARD_PACK_ORDER_DETAIL_STATUS])}</span>
                            </div>
                            <div className='text-color-9 font-size-12  line-height-24'>
                                卡号:{iccid}
                            </div>
                            <div className='text-color-9  font-size-12 line-height-24'>
                                订单号:{item.id}
                            </div>
                            <div className='text-color-9  font-size-12  line-height-24'>
                                套餐名:{item.packageName}
                            </div>
                            <div className='text-color-9  font-size-12 line-height-24'>
                                套餐销售价格:{item.packageSaleFace}
                            </div>
                            <div className='text-color-9  font-size-12 line-height-24'>
                                实付金额:{item.payMoney}
                            </div>
                            <div className='text-color-9  font-size-12 line-height-24'>
                                退订金额:{item.refundAmt}
                            </div>
                            <div className='text-color-9 font-size-12  line-height-24'>
                                有效期:{item.validTime ? dayjs(item.validTime).format('YYYY-MM-DD') : ''} - {item.invalidTime ? dayjs(item.invalidTime).format('YYYY-MM-DD') : ''}
                            </div>
                            <div className='text-color-9 font-size-12  line-height-24'>
                                订购时间:{item.createTime}
                            </div>
                        </div>
                    })
                }
            </div>

            {/* </Fullscreen> */}

        </div>


    );
}

